import React, { createContext, useContext, useState } from 'react';



const Father = () => {
	const [count, setCount] = useState(0);
	return (
		<div>
			<countCtx.Provider value={count}>
				<div onClick={() => setCount(count + 1)}>father</div>
				<Child />
			</countCtx.Provider>
		</div>
	);
};

export default Father;

function Child() {
	return (
		<div>
			<div>child</div>
			<GrandChild />
		</div>
	);
}

function GrandChild() {
	const count = useContext(countCtx);

	return (
		<div>
			<div>GrandChild:{count}</div>
			<GreatGrandChild />
		</div>
	);
}
function GreatGrandChild() {
	const count = useContext(countCtx);
	return (
		<div>
			<div>GreateGrandChild</div>
			<div>{count}</div>
		</div>
	);
}